<template>
  <div>
    <TaskChatDialog
      title="浏览"
      ref="dialogRef"
      :model-value="modelValue"
      fullscreen
      body-class-name="dialog-content"
      append-to-body
      @open="open"
      @close="close"
      destroy-on-close>
      <div :style="{ height: bodyHeight }">
        <!-- 临时渲染-->
        <iframe
          ref="iframeRef"
          id="iframe"
          :src="url"
          frameborder="0"
          marginheight="0"
          marginwidth="0"
          :style="{ width: '100%', height: '100%' }" />
      </div>
    </TaskChatDialog>
  </div>
</template>

<script setup>
import { useElementSize } from '@vueuse/core'

const props = defineProps({
  modelValue: Boolean,
  url: String,
})

const dialogRef = ref()

const emit = defineEmits(['update:modelValue', 'refresh'])

const bodyHeight = ref('100%')
const iframeRef = ref()

function open() {
  nextTick(() => {
    let length = document.getElementsByClassName('elp-dialog__body')?.length
    if (length) {
      const el = document.getElementsByClassName('elp-dialog__body')[length - 1]
      bodyHeight.value = `${useElementSize(el)?.height?.value - 20}px`
    }
  })
}

function close() {
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.group-img {
  margin-left: 5px;
  cursor: pointer;
}
.icon-name {
  position: relative;
  top: -3px;
  margin-left: 5px;
}
</style>
